<template>
  <div class="featured-shops-container">
    <!-- 加载状态控制 -->
    <div v-if="loading">
      <!-- 颜色选择器骨架屏 -->
      <div class="color-selector">
        <div class="color-selector-wrapper">
          <a-skeleton-button :block="true" style="width: 100%; height: 40px;" />
        </div>
      </div>

      <!-- 主横幅骨架屏 -->
      <div class="main-banner">
        <div class="banner-split">
          <div class="banner-half" v-for="i in 2" :key="i">
            <a-skeleton-image style="width: 100%; height: 857px !important;" />
          </div>
        </div>
      </div>

      <!-- 描述文字骨架屏 -->
      <div class="collection-description">
        <a-skeleton :paragraph="{ rows: 2 }" />
      </div>

      <!-- 产品系列骨架屏 -->
      <div class="collection-section" v-for="i in 4" :key="i">
        <a-skeleton :paragraph="{ rows: 1 }" style="margin-bottom: 20px;" />
        <div class="smooth-carousel">
          <div class="product-skeleton-grid">
            <div v-for="j in 4" :key="j" class="product-item">
              <a-skeleton-image style="width: 100%; height: 613px;" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实际内容 -->
    <div v-else>
      <!-- 顶部颜色选择器 -->
      <div class="color-selector">
        <div class="color-selector-wrapper">
          <a-radio-group v-model:value="selectedColor" button-style="solid">
            <a-radio-button
              v-for="(item,index) in getSonclassifyDataChildren"
              :key="index"
              class="color-option"
              :style="{ border: `1px solid ${item.color}` }"
              @click="handleColorClick(item.name)"
            >
              <div style="display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: center;">
                <div
                  class="color-dot"
                  :style="{
                    background: `${item.color}`,
                    display: 'inline-block',
                    width: '19px',
                    height: '19px',
                    borderRadius: '50%',
                    marginRight: '8px'
                  }"
                ></div>
                <div style="display: inline-block; white-space: nowrap;">{{ item.name }}</div>
              </div>
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>

      <!-- 主横幅图片区域 -->
      <div class="main-banner">
        <div class="banner-split">
          <div class="banner-half" v-for="(item,index) in firstBannerImages" :key="index">
            <a :href="`/classify/${item.url}-${item.id}.html`"  :title="item.title" target="_self" >
              <a-image
                class="banner-image"
                :src="item.icon"
                alt="Peony Collection"
                :preview="false"
                :isLCP="true"
            />
            </a>
          </div>
        </div>
        <div class="banner-title">
          <h1>Glow <span class="italic-text">of the</span> Season</h1>
        </div>
      </div>

      <!-- 描述文字 -->
      <div class="collection-description">
        <p>Soft and feminine, a rosy hue adds a playful charm to your wardrobe, while a timeless blue offers cool elegance for any season.</p>
      </div>

      <!-- Peony Romance 系列 -->
      <div class="collection-section"  id="peony-section">
        <h1 class="collection-title">{{getSonclassifyDataChildren[0]?.name}} <span class="italic-text">Romance</span></h1>

        <!-- 使用Ant Design Carousel组件 -->
        <div class="smooth-carousel">
          <a-carousel
            ref="peonyCarousel"
            :autoplay="carouselStates.peony.autoplay"
            :dots="false"
            :infinite="true"
            :slidesToShow="4"
            :slidesToScroll="1"
            :effect="'scrollx'"
            :autoplaySpeed="2000"
            :speed="500"
            :pauseOnHover="false"
            :cssEase="'linear'"
          >
            <div class="product-item" v-for="(product, index) in getSonclassifyDataChildren[0]?.goods" :key="index">
              <a :href="`/product/${product.url}.html`" :title="product.name" target="_self" >
                <a-image  :src="product.images[0]" alt="name" :preview="false"/>
              </a>
            </div>
          </a-carousel>
          <!-- <div class="product-item" v-for="(product, index) in getSonclassifyDataChildren[0].goods" :key="index">
              <a-image  :src="product.images[0]" alt="name" :preview="false"/>
            </div> -->
        </div>

        <!-- 轮播导航 -->
        <div class="carousel-controls">
          <div>
              <button class="carousel-control prev" @click="prevSlide('peony')">
                <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[0]?.color} !important`}">
                  <template #icon><LeftOutlined  style="color: #fff"/></template>
                </a-button>
              </button>
              <button class="carousel-control next" @click="nextSlide('peony')">
                <a-button shape="circle" type="text"  :style="{background:`${getSonclassifyDataChildren[0]?.color} !important`}">
                  <template #icon><right-outlined style="color: #fff"/></template>
                </a-button>
              </button>
            </div>
            <!-- 添加暂停/播放按钮到导航 -->
            <button class="carousel-control play-pause">
              <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[0]?.color} !important`}" @click="togglePlayPause('peony')">
                <template #icon>
                  <PauseOutlined v-if="carouselStates.peony.autoplay" style="color: #fff"/>
                  <PlayCircleOutlined v-else style="color: #fff"/>
                </template>
              </a-button>
            </button>
          </div>
        </div>

      <!-- Vintage Blue 系列 -->
      <div class="collection-section"  id="blue-section">
        <h1 class="collection-title" style="right: 40px; text-align: right;">Vintage <span class="italic-text">{{getSonclassifyDataChildren[1]?.name}}</span></h1>

        <!-- 使用Ant Design Carousel组件 -->
        <div class="smooth-carousel">
          <a-carousel
            ref="blueCarousel"
            :autoplay="carouselStates.blue.autoplay"
            :dots="false"
            :infinite="true"
            :slidesToShow="4"
            :slidesToScroll="1"
            :effect="'scrollx'"
            :autoplaySpeed="2000"
            :speed="500"
            :pauseOnHover="false"
            :cssEase="'linear'"
          >
            <div class="product-item" v-for="(product, index) in getSonclassifyDataChildren[1]?.goods" :key="index">
              <a :href="`/product/${product.url}.html`" :title="product.name" target="_self" >
                <a-image :src="product.images[0]" :alt="product.name" :preview="false"/>
              </a>
            </div>
          </a-carousel>
        </div>

        <!-- 轮播导航 -->
        <div class="carousel-controls">
          <div>
            <button class="carousel-control prev" @click="prevSlide('blue')">
              <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[1]?.color} !important`}">
                <template #icon><left-outlined style="color: #fff"/></template>
              </a-button>
            </button>
            <button class="carousel-control next" @click="nextSlide('blue')">
              <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[1]?.color} !important`}">
                <template #icon><right-outlined style="color: #fff"/></template>
              </a-button>
            </button>
          </div>
          <!-- 添加暂停/播放按钮到导航 -->
          <button class="carousel-control play-pause">
            <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[1]?.color} !important`}" @click="togglePlayPause('blue')">
              <template #icon>
                <PauseOutlined v-if="carouselStates.blue.autoplay" style="color: #fff"/>
                <PlayCircleOutlined v-else style="color: #fff"/>
              </template>
            </a-button>
          </button>
        </div>
      </div>

      <!-- Shades of the Future 系列 -->
      <div class="main-banner">
        <div class="banner-split">
          <div class="banner-half" v-for="(item,index) in secondBannerImages" :key="index">
            <a :href="`/classify/${item.url}-${item.id}.html`"  :title="item.title" target="_self" >
              <a-image
                class="banner-image"
                :src="item.icon"
                alt="Peony Collection"
                :preview="false"
                :isLCP="true"
            />
            </a>
          </div>
        </div>
        <div class="banner-title" style="left: 40px; text-align: left;">
          <h1>{{getSonclassifyDataChildren[2]?.name}} <span class="italic-text">of the</span> Season</h1>
        </div>
      </div>
       <!-- 描述文字 -->
       <div class="collection-description">
        <p>Striking and luxe, this shimmering standout catches every eye, while warm neutrals bring balance and effortless sophistication to every look.</p>
      </div>
      <!-- Metallic Radiance 系列 -->
      <div class="collection-section"  id="metallic-section">
        <h1 class="collection-title" style="right: 40px;text-align: right;">Metallic <span class="italic-text">Radiance</span></h1>

        <!-- 使用Ant Design Carousel组件 -->
        <div class="smooth-carousel">
          <a-carousel
            ref="metallicCarousel"
            :autoplay="carouselStates.metallic.autoplay"
            :dots="false"
            :infinite="true"
            :slidesToShow="4"
            :slidesToScroll="1"
            :effect="'scrollx'"
            :autoplaySpeed="2000"
            :speed="500"
            :pauseOnHover="false"
            :cssEase="'linear'"
          >
            <div class="product-item" v-for="(product, index) in getSonclassifyDataChildren[2]?.goods" :key="index">
              <a :href="`/product/${product.url}.html`" :title="product.name" target="_self" >
                <a-image :src="product.images[0]" :alt="product.name" :preview="false"/>
              </a>
            </div>
          </a-carousel>
        </div>

        <!-- 轮播导航 -->
        <div class="carousel-controls">
          <div>
              <button class="carousel-control prev" @click="prevSlide('metallic')">
                <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[2]?.color} !important`}">
                  <template #icon><left-outlined style="color: #fff"/></template>
              </a-button>
            </button>
            <button class="carousel-control next" @click="nextSlide('metallic')">
              <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[2]?.color} !important`}">
                <template #icon><right-outlined style="color: #fff"/></template>
              </a-button>
            </button>
          </div>
          <!-- 添加暂停/播放按钮到导航 -->
          <button class="carousel-control play-pause">
            <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[2]?.color} !important`}" @click="togglePlayPause('metallic')">
              <template #icon>
                <PauseOutlined v-if="carouselStates.metallic.autoplay" style="color: #fff"/>
                <PlayCircleOutlined v-else style="color: #fff"/>
              </template>
            </a-button>
          </button>
        </div>
      </div>

      <!-- Grounded Beige 系列 -->
      <div class="collection-section"  id="beige-section">
        <h1 class="collection-title">{{getSonclassifyDataChildren[3]?.name}} <span class="italic-text">Beige</span></h1>

        <!-- 使用Ant Design Carousel组件 -->
        <div class="smooth-carousel">
          <a-carousel
            ref="beigeCarousel"
            :autoplay="carouselStates.beige.autoplay"
            :dots="false"
            :infinite="true"
            :slidesToShow="4"
            :slidesToScroll="1"
            :effect="'scrollx'"
            :autoplaySpeed="2000"
            :speed="500"
            :pauseOnHover="false"
            :cssEase="'linear'"
          >
            <div class="product-item" v-for="(product, index) in getSonclassifyDataChildren[3]?.goods" :key="index">
              <a :href="`/product/${product.url}.html`" :title="product.name" target="_self" >
                <a-image :src="product.images[0]" :alt="product.name" :preview="false"/>
              </a>
            </div>
          </a-carousel>
        </div>

        <!-- 轮播导航 -->
        <div class="carousel-controls">
          <div>
              <button class="carousel-control prev" @click="prevSlide('beige')">
                <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[3]?.color} !important`}">
                  <template #icon><left-outlined style="color: #fff"/></template>
                </a-button>
              </button>
              <button class="carousel-control next" @click="nextSlide('beige')">
                <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[3]?.color} !important`}">
                  <template #icon><right-outlined style="color: #fff"/></template>
                </a-button>
              </button>
          </div>
          <!-- 添加暂停/播放按钮到导航 -->
          <button class="carousel-control play-pause">
            <a-button shape="circle" type="text" :style="{background:`${getSonclassifyDataChildren[3]?.color} !important`}" @click="togglePlayPause('beige')">
              <template #icon>
                <PauseOutlined v-if="carouselStates.beige.autoplay" style="color: #fff"/>
                <PlayCircleOutlined v-else style="color: #fff"/>
              </template>
            </a-button>
          </button>
        </div>


      </div>
      <!-- 描述文字 -->
      <div class="description">
          <h3>Women's Accessories in Shades of the Season</h3>
          <p>Discover the Shades of the Season collection, where every accessory tells a story. From playful pinks and serene blues to shimmering metallics and grounded neutrals, these curated hues bring versatility and elegance to every outfit. Discover a range of chic crossbodies, structured satchels, sleek heels, and everyday sneakers designed to suit every mood and moment. Whether you're making a bold statement with standout metallics or keeping it timeless with neutral classics, this collection has the perfect finishing touches for any style. Explore accessories that seamlessly transition from winter to spring, ensuring you're always one step ahead in effortless fashion.</p>
          <div style="height: 100px;"></div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { LeftOutlined, RightOutlined, PauseOutlined, PlayCircleOutlined } from '@ant-design/icons-vue';
import {getSonclassify } from '@/api/home'
import { useRoute } from 'vue-router';

const route = useRoute();
// 当前选中的颜色系列
const selectedColor = ref('all');
const getSonclassifyData = ref([])
const getSonclassifyDataChildren = ref([])
const getSonclassifyDataDoods = ref([])
// Metallic 系列产品数据
const metallicProducts = ref([
  {
    name: '银色单肩包',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250513161944/20250513161944_682300a06088f.webp',
  },
  {
    name: '银色水桶包',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250513161944/20250513161944_682300a06088f.webp',
  },
  {
    name: '银色手提包',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250513161944/20250513161944_682300a06088f.webp',
  },
  {
    name: '银色新月包',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250513161944/20250513161944_682300a06088f.webp',
  },{
    name: '银色单肩包',
    image: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250513161944/20250513161944_682300a06088f.webp',
  }
]);

// 轮播组件引用
const peonyCarousel = ref<any>(null);
const blueCarousel = ref<any>(null);
const metallicCarousel = ref<any>(null);
const beigeCarousel = ref<any>(null);

// 每个轮播的状态 - 使用 Ant Design 的 Carousel 控制
const carouselStates = reactive({
  peony: {
    autoplay: true
  },
  blue: {
    autoplay: true
  },
  metallic: {
    autoplay: true
  },
  beige: {
    autoplay: true
  }
});

// 添加加载状态
const loading = ref(true);

onMounted(() => {
  featuredclassify()
})
const featuredclassify = async() => {
  try {
    loading.value = true;
    const res = await getSonclassify(route.query.id);
    console.log(res.result[0].goods);

    getSonclassifyData.value = res.result[0].goods;
    getSonclassifyDataChildren.value = res.result[0].children;
  } catch (error) {
    console.error('加载数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 切换播放/暂停状态
const togglePlayPause = (color: 'peony' | 'blue' | 'metallic' | 'beige') => {
  carouselStates[color].autoplay = !carouselStates[color].autoplay;
  console.log(`${color} 轮播状态: ${carouselStates[color].autoplay ? '播放' : '暂停'}`);
};

// 上一张
const prevSlide = (color: 'peony' | 'blue' | 'metallic' | 'beige') => {
  const carousel = color === 'peony' ? peonyCarousel.value :
                  color === 'blue' ? blueCarousel.value :
                  color === 'metallic' ? metallicCarousel.value :
                  beigeCarousel.value;

  if (carousel && carousel.prev) {
    carousel.prev();
  }
};

// 下一张
const nextSlide = (color: 'peony' | 'blue' | 'metallic' | 'beige') => {
  const carousel = color === 'peony' ? peonyCarousel.value :
                  color === 'blue' ? blueCarousel.value :
                  color === 'metallic' ? metallicCarousel.value :
                  beigeCarousel.value;

  if (carousel && carousel.next) {
    carousel.next();
  }
};

// 处理颜色点击事件
const handleColorClick = (colorName: string) => {
  // 设置选中的颜色
  selectedColor.value = colorName;
  // 滚动到对应区域
  scrollToSection(colorName);
};

// 滚动到指定区域的函数
const scrollToSection = (sectionName: string) => {
  console.log(sectionName);
  const sectionId = `${sectionName.toLowerCase()}-section`;
  const element = document.getElementById(sectionId);

  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
};

// 计算属性：获取前两张横幅图片
const firstBannerImages = computed(() => {
  return getSonclassifyDataChildren.value.slice(0, 2);
});

// 计算属性：获取后两张横幅图片
const secondBannerImages = computed(() => {
  return getSonclassifyDataChildren.value.slice(2, 4);
});

</script>

<style lang="scss" scoped>
.featured-shops-container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 20px;

  // 顶部颜色选择器
  .color-selector {
    display: flex;
    justify-content: left;
    margin: 30px 0;

    .color-selector-wrapper {
      display: flex;
      justify-content: left;
      width: 100%;
      max-width: 600px;
    }

    .ant-radio-group {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      padding:10px 0;
      // 只去掉按钮间隔线
      :deep(.ant-radio-button-wrapper) {
        &::before {
          display: none; // 移除分隔线
        }
      }
    }

    .color-option {
      display: flex !important;
      flex-direction: row !important;
      border-radius: 30px;
      padding: 6px 10px !important;
      margin: 0 5px;
      justify-content: center !important;
      align-items: center !important;
      height: 100%;
      background: transparent !important;
      color: #000 !important;

      &:hover, &:active, &:focus {
        background: transparent !important;
        color: #000 !important;
      }

      :deep(.ant-radio-button-wrapper) {
        color: #000 !important;

        &:hover, &:active, &:focus {
          color: #000 !important;
        }
      }

      :deep(.ant-radio-button-wrapper-content) {
        color: #000 !important;
      }

      /* 颜色点 */
      .color-dot {
        display: inline-block !important;
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
        border-radius: 50% !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
      }

      /* 文本元素 */
      > div:nth-child(2) {
        display: inline-block !important;
        white-space: nowrap !important;
      }

      /* 强制处理 Ant Design 的内容包装器 */
      :deep(.ant-radio-button-wrapper) {
        display: flex !important;
        flex-direction: row !important;
        padding: 0 !important;
      }

      :deep(.ant-radio-button-wrapper-content) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
      }
    }
  }

  // 主横幅样式
  .main-banner {
    position: relative;
    margin-bottom: 20px;

    .banner-split {
      display: flex;
      .banner-half {
        width:100%;
        // height: 857px;
        // aspect-ratio: 975 / 857;
        overflow: hidden; // 添加overflow:hidden防止放大时图片溢出
        cursor: pointer;
        // margin:0 5px;
        .banner-image {
          width: 100%;
          height: 100%;
          display: block;
          transition: transform 0.5s ease; // 添加过渡效果
          object-fit: cover; /* 关键属性：填充容器并保持比例 */
          object-position: center; /* 居中裁剪（可选） */
        }

        &:hover {
          .banner-image {
            transform: scale(1.08); // 鼠标悬停时图片放大8%
          }
        }

        :deep(.ant-skeleton.ant-skeleton-element .ant-skeleton-image) {
          width: 100%;
          height: 857px;
        }
      }
    }

    .banner-title {
      position: absolute;
      top: -100px;
      right: 40px;
      text-align: right;

      h1 {
        font-size: 100px;
        font-weight: 400;
        color: #000;
        margin: 0;
        font-family: 'freight-display-pro', serif;
        font-style: italic !important;

        @media (max-width: 768px) {
          font-size: 32px;
        }

        @media (max-width: 480px) {
          font-size: 24px;
        }
      }

    }
  }

  // 描述文字
  .collection-description {
    text-align: center;
    max-width: 800px;
    margin: 50px auto 150px;


    p {
      font-size: 30px;
      font-weight: 600;
      line-height: 1.6;
      color: #333;
    }
  }
  .description {
    // margin-bottom:200px;
  }
  // 系列部分
  .collection-section {
    margin-bottom: 200px;
   position: relative;
    .collection-title {
      position: absolute;
      top: -111px;
      left: 40px;
      text-align: left;
      z-index: 10;
      font-size: 100px;
      font-weight: 400;
      margin-bottom: 30px;
      font-family: 'freight-display-pro', serif;
      letter-spacing: 0.03em;
      font-style: italic !important;
      .italic-text {
        font-style: italic;
        font-weight: 300;
      }

      @media (max-width: 768px) {
        font-size: 32px;
      }
    }

    // 未来系列横幅
    .future-banner {
      width: 100%;
      overflow: hidden;

      img {
        width: 100%;
        display: block;
      }
    }
  }

  // 平滑滚动轮播
  .smooth-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;

    :deep(.ant-carousel) {
      .slick-slide {
        pointer-events: auto;
        margin: 0 2.5px;
      }

      .slick-track {
        display: flex;
      }
    }

    .product-item {
      flex: 0 0 460px;
      background-color: #f5f5f5;
      aspect-ratio: 460 / 613;
      position: relative;
      overflow: hidden;
      margin-right: 5px;

      &:last-child {
        margin-right: 5px;
      }

      :deep(.ant-image) {
        width: 100%;
        height: 100%;
        display: block;

        .ant-image-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

// 通用样式
.italic-text {
  font-style: italic;
}

// 添加按钮样式
.carousel-controls {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;

  .carousel-control {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin:0 5px;
    &.play-pause {
      margin-left: 10px;
    }
  }
}
:deep(.ant-image) {
    width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

// 添加平滑滚动效果
html {
  scroll-behavior: smooth;
}

// 添加骨架屏相关样式
.product-skeleton-grid {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.product-item {
  flex: 0 0 460px;
  background-color: #f5f5f5;
  aspect-ratio: 460 / 613;
  position: relative;
  overflow: hidden;
  margin-right: 5px;

  &:last-child {
    margin-right: 5px;
  }
}
:deep(:where(.css-dev-only-do-not-override-12unj27).ant-skeleton.ant-skeleton-element .ant-skeleton-image) {
    width: 100%;
    height: 857px;
  }

</style>
